<template>
  <nav-bar />
  <view class="scrap-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="onBack">&#8592;</text>
      <text class="nav-title">报废记录</text>
    </view>

    <!-- 顶部搜索栏和操作按钮 -->
    <view class="search-bar-wrap">
      <view class="search-input-wrap">
        <input 
          class="search-input" 
          v-model="searchKeyword" 
          placeholder="搜索商品名称/ID/操作员/原因" 
          @confirm="onSearch"
        />
        <text class="search-icon" @click="onSearch">🔍</text>
      </view>
      <view class="action-row">
        <view class="filter-btn" @click="showFilterPopup">
          <text class="filter-icon">⚡</text>
          <text class="filter-text">筛选</text>
        </view>
        <view class="add-btn" @click="onAddScrap">新增报废</view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <scroll-view class="filter-tags" scroll-x v-if="hasActiveFilters">
      <view class="tags-container">
        <view class="tag" v-if="filters.location">
          <text>{{ filters.location === 1 ? '货架' : '仓库' }}</text>
          <text class="close" @click="removeFilter('location')">×</text>
        </view>
        <view class="tag" v-if="filters.dateRange.start">
          <text>{{ formatDate(filters.dateRange.start) }} - {{ formatDate(filters.dateRange.end) }}</text>
          <text class="close" @click="removeFilter('dateRange')">×</text>
        </view>
        <view class="tag" v-if="filters.operator">
          <text>{{ filters.operator }}</text>
          <text class="close" @click="removeFilter('operator')">×</text>
        </view>
        <view class="clear-all" @click="clearAllFilters">清除全部</view>
      </view>
    </scroll-view>

    <!-- 报废记录列表 -->
    <scroll-view 
      class="scrap-list" 
      scroll-y 
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="scrap-item" v-for="item in filteredScrapList" :key="item.scrap_id">
        <view class="scrap-header">
          <view class="scrap-title">
            <text class="product-name">{{ item.product?.name }}</text>
            <text class="scrap-id" @click="copyScrapId(item.scrap_id)">ID: {{ item.scrap_id }}</text>
          </view>
          <view class="scrap-status" :class="item.scrap_location === 1 ? 'shelf' : 'warehouse'">
            {{ item.scrap_location === 1 ? '货架' : '仓库' }}
          </view>
        </view>

        <view class="scrap-content">
          <view class="scrap-info">
            <view class="info-item">
              <text class="label">报废数量：</text>
              <text class="value">{{ item.scrap_number }}个</text>
            </view>
            <view class="info-item">
              <text class="label">报废原因：</text>
              <text class="value reason">{{ item.scrap_reason }}</text>
            </view>
            <view class="info-item">
              <text class="label">操作员：</text>
              <text class="value">{{ item.user?.username }}</text>
            </view>
            <view class="info-item">
              <text class="label">报废时间：</text>
              <text class="value">{{ formatDateTime(item.create_time) }}</text>
            </view>
          </view>

          <!-- 报废图片预览 -->
          <scroll-view 
            class="scrap-images" 
            scroll-x 
            v-if="item.images && item.images.length > 0"
          >
            <view 
              class="image-item" 
              v-for="img in item.images" 
              :key="img.id"
              @click="previewImage(item.images, img)"
            >
              <image :src="IntranetConfig.domain + img.image" mode="aspectFill" />
            </view>
          </scroll-view>
        </view>

        <view class="scrap-footer">
          <view class="edit-btn" @click="onEditScrap(item)">编辑</view>
          <view class="delete-btn" @click="onDeleteScrap(item)">删除</view>
        </view>
      </view>
    </scroll-view>

    <!-- 筛选弹窗 -->
    <uni-popup ref="filterPopup" type="bottom">
      <view class="filter-popup">
        <view class="popup-header">
          <text class="popup-title">筛选条件</text>
          <text class="popup-close" @click="closeFilterPopup">×</text>
        </view>
        
        <view class="popup-content">
          <!-- 报废位置 -->
          <view class="filter-section">
            <view class="section-title">报废位置</view>
            <view class="location-options">
              <view 
                class="location-option" 
                :class="{ active: filters.location === 1 }"
                @click="setLocation(1)"
              >
                货架
              </view>
              <view 
                class="location-option" 
                :class="{ active: filters.location === 2 }"
                @click="setLocation(2)"
              >
                仓库
              </view>
            </view>
          </view>

          <!-- 时间范围 -->
          <view class="filter-section">
            <view class="section-title">时间范围</view>
            <view class="date-range">
              <picker 
                mode="date" 
                :value="filters.dateRange.start" 
                @change="onStartDateChange"
              >
                <view class="date-picker" :class="{ placeholder: !filters.dateRange.start }">
                  <text>{{ filters.dateRange.start || '开始日期' }}</text>
                </view>
              </picker>
              <text class="date-separator">至</text>
              <picker 
                mode="date" 
                :value="filters.dateRange.end" 
                @change="onEndDateChange"
              >
                <view class="date-picker" :class="{ placeholder: !filters.dateRange.end }">
                  <text>{{ filters.dateRange.end || '结束日期' }}</text>
                </view>
              </picker>
            </view>
          </view>

          <!-- 操作员 -->
          <view class="filter-section">
            <view class="section-title">操作员</view>
            <picker 
              :range="operatorList" 
              range-key="username"
              @change="onOperatorChange"
            >
              <view class="operator-picker">
                <text>{{ filters.operator || '请选择操作员' }}</text>
                <text class="arrow">></text>
              </view>
            </picker>
          </view>
        </view>

        <view class="popup-footer">
          <button class="reset-btn" @click="resetFilters">重置</button>
          <button class="confirm-btn" @click="applyFilters">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 消息框组件 -->
    <message-box
      v-model="showMsgBox"
      :title="msgBoxTitle"
      :content="msgBoxContent"
      :showCancel="msgBoxShowCancel"
      :confirmText="msgBoxConfirmText"
      :cancelText="msgBoxCancelText"
      @confirm="onMsgBoxConfirm"
      @cancel="onMsgBoxCancel"
    />

    <!-- Toast 组件 -->
    <toast
      v-model="showToast"
      :content="toastContent"
      :type="toastType"
      :duration="toastDuration"
    />
  </view>
  </template>
  
  <script setup>
import { ref, computed, onMounted } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MessageBox from '@/components/message-box/message-box.vue'
import Toast from '@/components/toast/toast.vue'

// 获取用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

// Toast 相关
const showToast = ref(false)
const toastContent = ref('')
const toastType = ref('')
const toastDuration = ref(2000)

function showCustomToast(content, type = '', duration = 2000) {
  toastContent.value = content
  toastType.value = type
  toastDuration.value = duration
  showToast.value = true
}

// 消息框相关
const showMsgBox = ref(false)
const msgBoxTitle = ref('')
const msgBoxContent = ref('')
const msgBoxShowCancel = ref(true)
const msgBoxConfirmText = ref('确定')
const msgBoxCancelText = ref('取消')
let msgBoxCallback = null

function openMsgBox({ title = '', content = '', showCancel = true, confirmText = '确定', cancelText = '取消', callback = null }) {
  msgBoxTitle.value = title
  msgBoxContent.value = content
  msgBoxShowCancel.value = showCancel
  msgBoxConfirmText.value = confirmText
  msgBoxCancelText.value = cancelText
  msgBoxCallback = callback
  showMsgBox.value = true
}

function onMsgBoxConfirm() {
  if (msgBoxCallback) msgBoxCallback(true)
}

function onMsgBoxCancel() {
  if (msgBoxCallback) msgBoxCallback(false)
}

// 筛选相关
const filterPopup = ref(null)
const filters = ref({
  location: null,
  dateRange: {
    start: '',
    end: ''
  },
  operator: ''
})
const operatorList = ref([])

// 计算是否有激活的筛选条件
const hasActiveFilters = computed(() => {
  return filters.value.location || 
         filters.value.dateRange.start || 
         filters.value.dateRange.end || 
         filters.value.operator
})

// 显示筛选弹窗
function showFilterPopup() {
  filterPopup.value.open()
}

// 关闭筛选弹窗
function closeFilterPopup() {
  filterPopup.value.close()
}

// 设置报废位置
function setLocation(location) {
  filters.value.location = filters.value.location === location ? null : location
}

// 开始日期变化
function onStartDateChange(e) {
  filters.value.dateRange.start = e.detail.value
}

// 结束日期变化
function onEndDateChange(e) {
  filters.value.dateRange.end = e.detail.value
}

// 操作员变化
function onOperatorChange(e) {
  const index = e.detail.value
  filters.value.operator = operatorList.value[index].username
}

// 移除筛选条件
function removeFilter(type) {
  if (type === 'dateRange') {
    filters.value.dateRange = { start: '', end: '' }
  } else {
    filters.value[type] = null
  }
  applyFilters()
}

// 清除所有筛选条件
function clearAllFilters() {
  filters.value = {
    location: null,
    dateRange: {
      start: '',
      end: ''
    },
    operator: ''
  }
  applyFilters()
}

// 重置筛选条件
function resetFilters() {
  filters.value = {
    location: null,
    dateRange: {
      start: '',
      end: ''
    },
    operator: ''
  }
}

// 应用筛选条件
function applyFilters() {
  closeFilterPopup()
  getScrapList(true)
}

// 格式化日期
function formatDate(date) {
  if (!date) return ''
  return date.replace(/-/g, '/')
}

// 格式化日期时间
function formatDateTime(datetime) {
  if (!datetime) return ''
  return datetime.replace('T', ' ').substring(0, 16)
}

// 获取操作员列表
async function getOperatorList() {
  try {
    const res = await uni.request({
      url: `${IntranetConfig.domain}api/users/get_user_list/`,
      method: 'GET',
      header: IntranetConfig.headers
    })

    if (res.data.code === 200) {
      operatorList.value = res.data.data
    }
  } catch (error) {
    showCustomToast('获取操作员列表失败', 'error')
  }
}

// 报废记录列表相关
const scrapList = ref([])
const searchKeyword = ref('')
const page = ref(1)
const isRefreshing = ref(false)

// 获取报废记录列表
async function getScrapList(isRefresh = false) {
  try {
    if (isRefresh) {
      page.value = 1
    }

    const url = searchKeyword.value
      ? `${IntranetConfig.domain}api/scrap/search_scrap/?keyword=${encodeURIComponent(searchKeyword.value)}`
      : `${IntranetConfig.domain}api/scrap/get_scrap_list/`

    const res = await uni.request({
      url,
      method: 'GET',
      header: IntranetConfig.headers
    })

    if (res.data.code === 200) {
      let data = res.data.data

      // 应用筛选条件
      if (filters.value.location) {
        data = data.filter(item => item.scrap_location === filters.value.location)
      }
      if (filters.value.dateRange.start) {
        data = data.filter(item => item.create_time >= filters.value.dateRange.start)
      }
      if (filters.value.dateRange.end) {
        data = data.filter(item => item.create_time <= filters.value.dateRange.end + ' 23:59:59')
      }
      if (filters.value.operator) {
        data = data.filter(item => item.user?.username === filters.value.operator)
      }

      if (isRefresh) {
        scrapList.value = data
      } else {
        scrapList.value = [...scrapList.value, ...data]
      }
    } else {
      showCustomToast(res.data.msg || '获取报废记录失败', 'error')
    }
  } catch (error) {
    showCustomToast('获取报废记录失败', 'error')
  } finally {
    isRefreshing.value = false
  }
}

// 计算筛选后的列表
const filteredScrapList = computed(() => {
  return scrapList.value
})

// 搜索
function onSearch() {
  getScrapList(true)
}

// 下拉刷新
function onRefresh() {
  isRefreshing.value = true
  getScrapList(true)
}

// 预览图片
function previewImage(images, current) {
  const urls = images.map(img => IntranetConfig.domain + img.image)
  uni.previewImage({
    urls,
    current: IntranetConfig.domain + current.image
  })
}

// 删除报废记录
function onDeleteScrap(item) {
  openMsgBox({
    title: '确认删除',
    content: '确定要删除这条报废记录吗？',
    callback: async (confirmed) => {
      if (confirmed) {
        try {
          const res = await uni.request({
            url: `${IntranetConfig.domain}api/scrap/delete_scrap/${item.scrap_id}/`,
            method: 'DELETE',
            header: IntranetConfig.headers
          })

          if (res.data.code === 200) {
            showCustomToast('删除成功', 'success')
            getScrapList(true)
          } else {
            showCustomToast(res.data.msg || '删除失败', 'error')
          }
        } catch (error) {
          showCustomToast('删除失败', 'error')
        }
      }
    }
  })
}

// 新增报废记录
function onAddScrap() {
  uni.navigateTo({
    url: '/pages/scrap/add_scrap'
  })
}

// 检查权限
function checkPermission() {
  if (!userInfo.value) {
    showCustomToast('请先登录', 'error')
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }, 1500)
    return false
  }

  if (userInfo.value.is_superuser !== 1 && userInfo.value.is_superuser !== 2) {
    showCustomToast('您没有报废权限', 'error')
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
    return false
  }

  return true
}

// 编辑报废记录
function onEditScrap(item) {
  uni.navigateTo({
    url: `/pages/scrap/edit_scrap?id=${item.scrap_id}`
  })
}

// 返回上一页
function onBack() {
  uni.navigateBack()
}

// 复制报废记录ID
function copyScrapId(id) {
  uni.setClipboardData({
    data: id.toString(),
    success: () => {
      // showCustomToast('ID已复制', 'success')
    }
  })
}

// 页面加载
onMounted(() => {
  if (checkPermission()) {
    getScrapList()
    getOperatorList()
  }
})
  </script>
  
  <style lang="scss" scoped>
.scrap-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  height: 96rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  
  .nav-back { 
    color: #333; 
    font-size: 44rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    
    &:active {
      background: rgba(0, 0, 0, 0.05);
    }
  }
  
  .nav-title { 
    flex: 1; 
    text-align: center; 
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.search-bar-wrap {
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  padding: 24rpx 32rpx 0 32rpx;
  overflow-x: hidden;
}

.search-input-wrap {
  width: 100%;
  position: relative;
  margin-bottom: 16rpx;
  overflow-x: hidden;

  .search-input {
    width: 100%;
    height: 72rpx;
    background: #f5f5f5;
    border-radius: 36rpx;
    padding: 0 72rpx 0 32rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;
    &::placeholder {
      color: #999;
    }
  }
  .search-icon {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32rpx;
    color: #666;
  }
}

.action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
  width: 100%;
  overflow-x: hidden;
}

.filter-btn {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  height: 64rpx;
  background: #f5f5f5;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s;
  .filter-icon {
    font-size: 32rpx;
    color: #666;
    margin-right: 8rpx;
  }
  .filter-text {
    font-size: 28rpx;
    color: #666;
  }
  &:active {
    transform: scale(0.98);
    background: darken(#f5f5f5, 5%);
  }
}

.add-btn {
  width: 160rpx;
  height: 64rpx;
  background: #ff7e2d;
  color: #fff;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s;
  &:active {
    transform: scale(0.98);
    background: darken(#ff7e2d, 5%);
  }
}

.filter-tags {
  background: #fff;
  padding: 16rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  width: 100%;
  box-sizing: border-box;

  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    padding: 8rpx 0;
    width: 100%;
    box-sizing: border-box;

    .tag {
      display: inline-flex;
      align-items: center;
      height: 52rpx;
      padding: 0 22rpx;
      background: linear-gradient(90deg, #fbeee6 0%, #e9f7ff 100%);
      border-radius: 26rpx;
      font-size: 26rpx;
      color: #ff7e2d;
      font-weight: 600;
      box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.08);
      border: 1rpx solid #ffe2c6;
      transition: box-shadow 0.2s;
      .close {
        margin-left: 10rpx;
        font-size: 30rpx;
        color: #ff4d4f;
        cursor: pointer;
        font-weight: bold;
        transition: color 0.2s;
        &:hover {
          color: #d9363e;
        }
      }
    }
    .clear-all {
      font-size: 26rpx;
      color: #fff;
      background: linear-gradient(90deg, #ff7e2d 0%, #ffb86c 100%);
      border-radius: 26rpx;
      padding: 0 22rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
      font-weight: 600;
      box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.12);
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      &:active {
        background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
        color: #fffbe6;
      }
    }
  }
}

.scrap-list {
  height: calc(100vh - 120rpx - 80rpx);
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  overflow-x: hidden;
  width: 100%;
}

.scrap-item {
  background: #fff;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s;
  width: 100%;
  box-sizing: border-box;
  &:active {
    transform: scale(0.99);
  }

  .scrap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    border-bottom: 1rpx solid #f5f5f5;
    width: 100%;
    box-sizing: border-box;

    .scrap-title {
      flex: 1;
      margin-right: 24rpx;
      min-width: 0;
      .product-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
        word-break: break-all;
      }
      .scrap-id {
        font-size: 24rpx;
        color: #999;
        word-break: break-all;
        padding: 4rpx 12rpx;
        background: #f5f5f5;
        border-radius: 8rpx;
        display: inline-block;
        margin-top: 8rpx;
        transition: all 0.3s;
        
        &:active {
          background: #e8e8e8;
          transform: scale(0.98);
        }
      }
    }
    .scrap-status {
      padding: 8rpx 24rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      &.shelf {
        background: #e6f7ff;
        color: #1890ff;
      }
      &.warehouse {
        background: #f6ffed;
        color: #52c41a;
      }
    }
  }

  .scrap-content {
    padding: 24rpx;
    width: 100%;
    box-sizing: border-box;
    .scrap-info {
      margin-bottom: 24rpx;
      .info-item {
        display: flex;
        margin-bottom: 16rpx;
        font-size: 28rpx;
        line-height: 1.5;
        &:last-child {
          margin-bottom: 0;
        }
        .label {
          color: #666;
          width: 140rpx;
          flex-shrink: 0;
        }
        .value {
          flex: 1;
          color: #333;
          &.reason {
            color: #666;
          }
        }
      }
    }
    .scrap-images {
      white-space: nowrap;
      margin: 0 -24rpx;
      padding: 0 24rpx;
      overflow-x: auto;
      width: 100%;
      box-sizing: border-box;
      .image-item {
        display: inline-block;
        width: 160rpx;
        height: 160rpx;
        margin-right: 16rpx;
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        &:last-child {
          margin-right: 0;
        }
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .scrap-footer {
    padding: 24rpx;
    border-top: 1rpx solid #f5f5f5;
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    width: 100%;
    box-sizing: border-box;
    .edit-btn {
      padding: 12rpx 32rpx;
      background: #e6f7ff;
      color: #1890ff;
      border-radius: 24rpx;
      font-size: 28rpx;
      transition: all 0.3s;
      &:active {
        transform: scale(0.98);
        background: darken(#e6f7ff, 5%);
      }
    }
    .delete-btn {
      padding: 12rpx 32rpx;
      background: #fff1f0;
      color: #ff4d4f;
      border-radius: 24rpx;
      font-size: 28rpx;
      transition: all 0.3s;
      &:active {
        transform: scale(0.98);
        background: darken(#fff1f0, 5%);
      }
    }
  }
}

.filter-popup {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;

      &:active {
        background: #f5f5f5;
      }
    }
  }

  .popup-content {
    padding: 32rpx;
    max-height: 60vh;
    overflow-y: auto;

    .filter-section {
      margin-bottom: 32rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 16rpx;
      }

      .location-options {
        display: flex;
        gap: 16rpx;

        .location-option {
          flex: 1;
          height: 72rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f5f5f5;
          border-radius: 36rpx;
          font-size: 28rpx;
          color: #666;
          transition: all 0.3s;

          &.active {
            background: #ff7e2d;
            color: #fff;
          }

          &:active {
            transform: scale(0.98);
          }
        }
      }

      .date-range {
        display: flex;
        flex-direction: column;
        gap: 24rpx;

        .date-picker {
          position: relative;
          height: 88rpx;
          background: #f8f9fa;
          border-radius: 44rpx;
          display: flex;
          align-items: center;
          padding: 0 32rpx;
          font-size: 28rpx;
          color: #333;
          border: 2rpx solid #e8e8e8;
          transition: all 0.3s;

          &:active {
            background: #f0f0f0;
            border-color: #ff7e2d;
          }

          &::before {
            content: '📅';
            margin-right: 12rpx;
            font-size: 32rpx;
          }

          &.placeholder {
            color: #999;
          }
        }

        .date-separator {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #999;
          font-size: 28rpx;
          height: 40rpx;
          position: relative;

          &::before,
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 80rpx;
            height: 2rpx;
            background: #e8e8e8;
          }

          &::before {
            left: 50%;
            transform: translateX(-120rpx);
          }

          &::after {
            right: 50%;
            transform: translateX(120rpx);
          }
        }
      }

      .operator-picker {
        height: 72rpx;
        background: #f5f5f5;
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
        font-size: 28rpx;
        color: #333;

        .arrow {
          color: #999;
          font-size: 28rpx;
        }
      }
    }
  }

  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    display: flex;
    gap: 16rpx;

    button {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;

      &:active {
        transform: scale(0.98);
      }
    }

    .reset-btn {
      background: #f5f5f5;
      color: #666;
    }

    .confirm-btn {
      background: #ff7e2d;
      color: #fff;
    }
  }
}
  </style>    
